<template>
  <!-- 现货订单 新建 -->
  <div class="mainContent sportnew">
    <pathTracking :path="Model.path"/>
    <div class="container">
      <!-- 第一步 -->
      <el-row class="steps">
        <div class="nav-title">
          <div class="number">1</div>
          <p class="font">第一步：确定参考单据</p>
        </div>
        <div class="step-item" v-show="Model.firstStep">
          <!-- 男士身份证 -->
          <el-row class="rows basic">
            <el-col :sm="12" :md="8" :lg="6">
              <div class="items">
                <label class="label" for>
                  <img class="required" src="@/assets/img/flower_red.png" alt>
                  参考单号：
                </label>
                <el-input
                  :disabled="!Model.isNew"
                  class="input-cont"
                  @blur="onFormClearAll"
                  v-model="Model.formData.number"
                  placeholder="请输入到货单号/发货单号"
                ></el-input>
              </div>
            </el-col>
            <el-col :sm="12" :md="8" :lg="6" v-if="Model.isNew">
              <div class="items">
                <div class="btn" @click="onSureSearchNumber">确认</div>
              </div>
            </el-col>
          </el-row>
          <el-row class="rows basic">
            <el-col :sm="12" :md="8" :lg="6">
              <div class="items">
                <label class="label" for>
                  <img class="required" src="@/assets/img/flower_red.png" alt>
                  供应商：
                </label>
                <el-input
                  :disabled="true"
                  class="input-cont"
                  v-model="Model.formData.supplier"
                  placeholder="请输入供应商"
                ></el-input>
              </div>
            </el-col>
            <el-col :sm="12" :md="8" :lg="6">
              <div class="items">
                <label class="label" for>
                  <img class="required" src="@/assets/img/flower_red.png" alt>
                  入库仓库：
                </label>
								<!-- :disabled="!Model.isNew" -->
                <el-select
                  
                  class="input-cont"
                  v-model="Model.formData.location"
                >
                  <el-option
                    v-for="(item,index) in Model.formData.options"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :sm="12" :md="8" :lg="6">
              <div class="items">
                <label class="label" for>备注：</label>
                <el-input class="input-cont" v-model="Model.formData.remark" placeholder="最多30字"></el-input>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-row>
      <!-- 第一步end -->
      <!-- 第二步 -->
      <el-row class="steps">
        <div class="nav-title">
          <div class="number">2</div>
          <p class="font">第二步：添加入库商品</p>
          <img
            v-if="Model.secondStep"
            @click="Model.secondStep = !Model.secondStep"
            class="img"
            src="@/assets/img/icon_collapse.png"
            alt
          >
          <img
            v-else
            @click="Model.secondStep = !Model.secondStep"
            class="img"
            src="@/assets/img/icon_unfold.png"
            alt
          >
        </div>
        <div class="step-item">
          <div style="padding: 10px 20px;">
            <div class="exportBox" v-show="!Model.detailFlag">
              <div class="exportBoxAuto">
                <span>是否手动导入</span>
                <el-radio-group v-model="Model.exportBarcodeFlag">
                  <el-radio :label="false">否</el-radio>
                  <el-radio :label="true">是</el-radio>
                </el-radio-group>
                <div class="exportBoxHand" v-show="!Model.exportBarcodeFlag">
                  <el-input
                    v-model="Model.exportBarcode"
                    placeholder="请输入条码／商品编码"
                    size="small"
                    style="margin: 0 20px;width: 200px;"
                  ></el-input>
                  <button class="normalButton bgBtnBrown" @click="onSearchExportBarcode">确认</button>
                </div>
                <button
                  class="normalButton bgBtnBrown"
                  v-show="Model.exportBarcodeFlag"
                  @click="onExportMaterial"
                  style="margin-left: 10px;"
                >
                  +
                  导入物料
                </button>
              </div>
              <div class="exportBoxAuto">
                <button class="normalButton bgBtnWhite" @click="onListDelete">删除</button>
              </div>
            </div>
            <el-table
              :data="Model.tableData"
              border
              style="width: 100%;max-height:550px"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="50" fixed></el-table-column>
              <el-table-column type="index" width="50" label="序号" fixed></el-table-column>
              <el-table-column prop="imageUrl" label="商品图片" width="200">
                <template slot-scope="scope">
                  <el-tooltip placement="top" effect="light">
                    <div slot="content">
                      <img class="maxTableImg" :src="scope.row.imageUrl" alt>
                    </div>
                    <img class="mainTableImg" :src="scope.row.imageUrl" alt>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="batchNo" label="条码" width="150"></el-table-column>
              <el-table-column prop="orderNumber" label="采购订单号" width="150"></el-table-column>
              <el-table-column prop="styleNumber" label="款号" width="150"></el-table-column>
              <el-table-column prop="productCategoryCategory" label="产品小类-品类" width="120"></el-table-column>
              <el-table-column prop="description" width="150">
                <template slot="header" slot-scope="scope">
                  <el-tooltip content="钻石信息顺序:颜色-净度-切工-抛光-对称-荧光" placement="top">
                    <span class="iconQuestionmark">描述</span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="netGoldWeight" label="净金重" width="200"></el-table-column>
              <el-table-column prop="theWeightOfBareStone" label="裸石克拉重" width="200"></el-table-column>
              <el-table-column prop="mainStoneOneActualCaratWeight" label="实际克拉重" width="120"></el-table-column>
              <el-table-column prop="netWeight" label="产品总重" width="120"></el-table-column>
              <el-table-column prop="remainingQuantity" label="应入数量" width="120"></el-table-column>
              <el-table-column prop="inQuantity" label="入库数量" width="150">
								<template slot-scope="scope">
									<el-input-number size="small" v-model="scope.row.inQuantity" :min="0" :max="scope.row.remainingQuantity"></el-input-number>
                </template>
							</el-table-column>
              <el-table-column prop="basicUnitOfMeasurement" label="单位" width="120"></el-table-column>
            </el-table>
            <div class="handleBox">
              <div class="handleBoxItem bgBtnWhite normalButton" @click="onListSave(0)">保存</div>
              <div class="handleBoxItem bgBtnWhite normalButton" @click="onListSave(1)">确认入库</div>
              <div class="handleBoxItem bgBtnWhite normalButton" @click="goBack">取消</div>
            </div>
          </div>
        </div>
      </el-row>
      <!-- 弹框 -->
      <el-dialog :visible.sync="Model.dialogFormVisible" top="100px" class="viewDialog">
        <div class="common-table-title">
          <div class="common-table-icon"></div>
          <div class="common-table-fl">导入物料</div>
        </div>
        <div class="exportInputBox">
          <el-input
            placeholder="请输入内容"
            v-model="Model.uploadFile.name"
            disabled
            class="input-with-select"
            size="small"
          >
            <el-button slot="append" size="small" type="primary">浏览</el-button>
          </el-input>
          <div class="exportInputHandle">
            <input type="file" @change="onUploadFileChange">
          </div>
          <div class="viewDialogFooter">
            <div class="viewDialogFooterSure" @click="onUploadSureFile">上传模板</div>
          </div>
          <div class="viewDialogFooter">
            <a :href="Model.fileUrl">{{Model.fileName}}</a>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import pathTracking from "@/components/common/pathTracking";
import card from "@/components/common/filterBtns";
import advancedSearch from "@/components/common/filter/advancedSearch";

import { getDateString } from "@/assets/js/common.js";
import Model from "./model.js";
import Controller from "./controller.js";
export default {
  name: "createPurchaseOrder",
  mixins: [Model, Controller],
  components: {
    pathTracking,
    card,
    advancedSearch
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "./index.less";
</style>
<style>
.sportnew .items .el-input__inner {
  height: 100%;
}

.sportnew .el-input {
  height: 100%;
}

.sportnew .el-date-editor {
  height: 100%;
}

.payitem .el-input {
  width: 240px;
}

.sportnew .el-cascader {
  width: 100%;
  height: 32px;
}

.sportnew .changeGoodsDialog .el-dialog {
  height: 80%;
}

.sportnew .confirm-dialo .el-dialog {
}
</style>
